<template>
  <div>
    <!-- banner -->
    <game-banner ref="gameBanner" @getGameInfoSuccess="gameInfoSuccess" @getStatistics="getStatistics" />

    <div v-loading="pageLoading" class="game_page">
      <!-- 顶部导航 -->
      <nav>
        <ul class="menu_list">
          <li
            v-for="(item, index) in leftMenuData"
            :key="index"
            class="menu_item"
            :class="{ 'router-link-active': activeName === item.name }"
            @click="clickEnter(item.name)"
          >
            {{ item.title }}
          </li>
        </ul>
      </nav>

      <!-- 路由组件 -->
      <router-view :game-info="gameInfo" :statistics="statistics" />
    </div>
  </div>
</template>

<script>
import gameBanner from '../components/gameBanner';
export default {
  components: {
    gameBanner
  },
  data() {
    return {
      pageLoading: true,
      activeName: 'GameInfo',
      leftMenuData: [
        {
          title: '首页',
          name: 'GameInfo'
        },
        {
          title: '分站赛',
          name: 'Substation'
        },
        {
          title: '参赛机构',
          name: 'Mechanism'
        },
        {
          title: '参赛选手',
          name: 'Player'
        },
        // {
        //   title: '人气榜',
        //   name: 'Popularity'
        // },
        // {
        //   title: '积分榜',
        //   name: 'Integral'
        // },
        {
          title: '教练领队榜',
          name: 'Official'
        },
        {
          title: '区域榜',
          name: 'Area'
        },
        {
          title: '赛区榜',
          name: 'Division'
        }
      ],
      gameId: '',
      gameInfo: {},
      statistics: {}
    };
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(val) {
        this.activeName = val.name;
      }
    }
  },
  created() {
    const $route = this.$route;
    this.gameRoute = $route.params.id;
    this.activeName = $route.activeName || $route.name;
  },
  methods: {
    // 赛事获取成功
    gameInfoSuccess(gameInfo) {
      this.gameInfo = gameInfo;
      this.gameId = gameInfo.id;
      this.pageLoading = false;
    },
    // 点击赛事报名
    clickEnter(name) {
      this.activeName = name;
      // 赛事主页 不添加赛事id;
      if (name === 'GameInfo') {
        this.$router.push({ name: name });
      } else {
        this.$router.push({
          name: name,
          query: { id: this.gameId }
        });
      }
    },
    getStatistics (data) {
      this.statistics = data;
    }
  }
};
</script>

<style scoped>
.game_page {
  padding: 40px 20px 20px;
}
.menu_list {
  display: flex;
  margin-bottom: 60px;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.menu_item {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  width: 164px;
  height: 40px;
  z-index: 1;
  border: 1px solid #aeb7c1;
  margin-left: -1px;
  color: #AEB7C1;
  font-size: 18px;
  cursor: pointer;
}
.menu_item:first-child {
  margin-left: 0;
}
.game_page .router-link-active {
  z-index: 2;
  color: #E02020;
  border: 1px solid #E02020;
}
</style>

<style>
  .home_league .modal_shadow {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
  }
  .home_league .game_modal_header {
    position: relative;
    box-sizing: border-box;
    height: 40px;
    padding-left: 32px;
    margin-bottom: 14px;
    line-height: 40px;
    color: #353434;
    font-weight: bold;
    font-size: 20px;
  }
  .home_league .game_modal_header::after {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 40px;
    background-color: #E02020;
    border-radius: 4px;
    content: "";
  }
  .home_league .schedule_content {
    padding: 20px;
  }

  .home_league .subtotal {
    font-size: 14px;
  }

  .home_league .agency_wrap span,
  .home_league .agency_wrap .agency_photo {
    vertical-align: middle;
  }
  .home_league .agency_photo {
    display: inline-block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
  }
  .home_league .agency_photo img {
    width: 100%;
    height: 100%;
  }
</style>
